<template>
    <div>
        <el-main style="min-height:800px">
            <el-page-header @back="goBack">
            </el-page-header>
            <el-row :gutter="20" style="line-height:20px">
                <el-col :span="18" :offset="3">
                    <el-card class="box-card" style="width:100%">
                        <div slot="header" class="clearfix">
                            <span class="headname">{{ marketer.storeName }}</span>
                        </div>
                        <el-empty :image-size="200" v-if="isEmpty"></el-empty>
                        <el-row :gutter="20">
                            <el-col :span="10" :offset="2" v-for="(dish, index) in dishList" :key="index">
                                <el-card shadow="hover">
                                    <el-col :span="6">
                                        <el-image style="width:120px; height:120px;" src="/images/food2.jpg"
                                            fit="cover"></el-image>
                                    </el-col>
                                    <el-col :span="15" :offset="3">
                                        <span class="name">{{ dish.name }}</span>
                                        <br>
                                        <span class="appraise">5.0分</span>
                                        <br>
                                        <span class="sail">月售3000份</span>
                                        <br>
                                        <span class="sail">起送10￥ 配送费2￥</span>
                                        <br>
                                        <span class="price">￥{{ dish.price }}</span>
                                        <br>
                                        <el-input-number v-model="dish.dishNumber" @change="JTSChange(dish, index)"
                                            :min="0" v-if="dish.dishNumber == 0" :max="10" size="mini" label="描述文字">
                                        </el-input-number>
                                        <el-input-number v-model="dish.dishNumber" v-if="dish.dishNumber > 0"
                                            @change="DRTChange(dish)" :min="0" :max="10" size="mini" label="描述文字">
                                        </el-input-number>
                                    </el-col>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <div style="line-height:20px">
                <el-badge :value="order.dishTotalNumber" class="itembody" v-if="order.dishTotalNumber > 0">
                    <el-button id="toBuy" icon="el-icon-platform-eleme" type="success" @click="toBuy">购买(￥{{ order.amount }})
                    </el-button>
                </el-badge>
            </div>
            <el-dialog title="选配" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <cf :flavorName="flavorName" :value="value" @change="getState"></cf>
            </el-dialog>
        </el-main>
    </div>
</template>

<script>
import chooseflavor from '@/component/chooseFlavor.vue'
import { getDishListByMarketerId, addToShoppingCart } from '@/utils/modules/customer.js'
export default {
    name: 'marketer',
    components: {
        'cf': chooseflavor
    },
    mounted() {
        this.marketerId = this.$route.query.id
        this.order.marketerId = this.marketerId
        this.init()
    },
    data() {
        return {
            order: {
                dishTotalNumber: 0,
                amount: 0,
                obj: [],
                flavor: '',
                dishId: '',
                // 设置这个属性是因为可能在同一个商家这里下单不止一种商品
                dishNumber: '',
                image: '',
                marketerId: '',
            },
            dishList: [],
            marketerId: '',
            marketer: {},
            dialogVisible: false,
            flavorName: '',
            value: '',
            idx: 0,
            isEmpty:false
        }
    },
    methods: {
        getState(val) {
            // 取消
            if (val.length == 1) {
                this.dishList[this.idx].dishNumber = 0
                this.dialogVisible = false
            } else {
                this.dishList[this.idx].chooseFlavor = val[0]
                this.dialogVisible = false
                console.log(this.dishList[this.idx])
            }
            this.conformityFirst()
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dishList[this.idx].dishNumber = 0
                    done();
                })
                .catch(_ => { });
        },
        // 刚开始
        JTSChange(val, index) {
            this.flavorName = val.flavorName
            this.value = val.value
            this.idx = index
            this.dialogVisible = true
        },
        // 期间
        DRTChange(val) {
            if (val.dishNumber == 0) {
                delete val.chooseFlavor
                console.log(val)
            }
            this.conformityFirst()
        },
        // 整合
        conformityFirst() {
            this.order.dishTotalNumber = 0
            this.order.amount = 0
            for (let i = 0; i < this.dishList.length; i++) {
                if (this.dishList[i].dishNumber > 0) {
                    this.order.dishTotalNumber += this.dishList[i].dishNumber
                    this.order.amount += this.dishList[i].price * this.dishList[i].dishNumber
                }
            }
        },
        conformitySecond() {
            this.order.obj = []
            for (let i = 0; i < this.dishList.length; i++) {
                if (this.dishList[i].dishNumber > 0) {
                    this.order.obj.push({ 'dishId': this.dishList[i].id, 'dishNumber': this.dishList[i].dishNumber, 'flavor': this.dishList[i].chooseFlavor })
                }
            }
            for (let i = 0; i < this.order.obj.length; i++) {
                this.order.flavor += (this.order.obj[i].flavor + ';')
                this.order.dishId += (this.order.obj[i].dishId + ';')
                this.order.dishNumber += (this.order.obj[i].dishNumber + ';')
            }
            this.order.flavor = this.order.flavor.substring(0, this.order.flavor.length - 1)
            this.order.dishId = this.order.dishId.substring(0, this.order.dishId.length - 1)
            this.order.dishNumber = this.order.dishNumber.substring(0, this.order.dishNumber.length - 1)
        },
        toBuy() {
            this.conformitySecond()
            this.$router.push({
                path:'/pay',
                query:{
                    'order':JSON.stringify({
                        'flavor':this.order.flavor,
                        'dishNumber':this.order.dishNumber,
                        'dishId':this.order.dishId,
                        'amount':this.order.amount,
                        'dishTotalNumber':this.order.dishTotalNumber,
                        'marketerId':this.marketerId
                    })
                }
            })
        },
        goBack() {
            this.conformitySecond()
            if (this.order.dishTotalNumber != 0) {
                addToShoppingCart(this.order).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.message,
                        showClose: true
                    })
                    setTimeout(()=>{
                        this.$router.replace({
                            path:'/suppilerAllBack'
                        })
                    })
                }).catch(err => {
                    this.$message({
                        type: 'error',
                        message: err.message,
                        showClose: true
                    })
                })
            } else {
                this.$router.push({
                    path: '/customer'
                })
            }
        },
        init() {
            getDishListByMarketerId({ 'marketerId': this.marketerId }).then(res => {
                let data = JSON.parse(JSON.stringify(res.data.itemList))
                if(data.length  == 0){
                    this.isEmpty = true
                }
                for (let i = 0; i < data.length; i++) {
                    data[i].dishNumber = 0
                }
                this.dishList = data
                this.marketer = JSON.parse(JSON.stringify(res.data.etc))
                this.order.image = this.marketer.image
                console.log(res)
            })
        }
    }
}
</script>
<style>
.text {
    font-size: 14px;
}

.itembody {
    position: fixed;
    bottom: 150px;
    right: 30px
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}

.headname {
    font-size: 40px;
    font-weight: 600;
    font-style: normal;
    padding-left: 0%;
}

/* 名字 */
.name {
    font-weight: 500;
    font-size: large;
    padding-left: 0%;
}

/* 评分 */
.appraise {
    font-size: small;
    color: red;
    font-weight: 100;
    padding-left: 0%;
}

/* 月售 */
.sail {
    font-size: small;
    font-weight: 100;
    color: #475669;
    padding-left: 0%;
}

.price {
    font-size: larger;
    font-weight: 600;
    padding-left: 0%;
    color: red;
}

#toBuy {
    position: fixed;
    bottom: 110px;
    right: 30px
}
</style>